Skip to main content

📑 Templates

The Templates section offers a comprehensive collection of 30+ pre-built screens that you can instantly add to your app. These templates come with functional components, professional layouts, and interactive elements that you can customize to match your needs.

How to Access Templates​

  1. Open Your Project: Navigate to the AppStruct Constructor
  2. Access Templates: Click on "Add Screen & Template" in the left sidebar
  3. Browse Templates: All templates are organized in a single expandable section
  4. Search Templates: Use the search bar to quickly find specific templates by name
  5. Select Template: Click on any template to add it to your project

Styles on Desktop

Available Templates​

AppStruct provides a comprehensive library of ready-to-use templates across different categories:

Authentication & User Management​

  • Login - Complete login screen with form validation
  • Sign Up - User registration page with input fields
  • Reset Password - Password recovery interface
  • Profile - User profile page with editable information
  • User - Alternative user profile layout

E-commerce & Shopping​

  • Product Page - Product showcase with details and images
  • Product Detail - Enhanced product view with specifications
  • Shopping Cart - Shopping cart interface with item management
  • Checkout - Complete checkout process with payment forms
  • Wishlist - Save favorite products for later
  • Order History - Track past purchases and orders

Business & Analytics​

  • Dashboard - Business dashboard with key metrics
  • Statistics - Analytics dashboard with charts and graphs
  • Invoice - Professional invoice template
  • Team Directory - Employee directory with contact information
  • Settings - Application settings and preferences page

Content & Communication​

  • Feed - Social media style content feed
  • Chat - Messaging interface with conversation threads
  • Notifications - Alert and notification center
  • Reviews - Customer review and rating system
  • Gallery - Image and media gallery layout
  • Search Results - Search results page with filtering

Information & Forms​

  • About Us - Company information and team showcase
  • Contact - Contact form with company details
  • Form - Generic form template for data collection
  • Info - Information display page
  • Landing - Marketing landing page layout
  • Pricing - Pricing plans and subscription options

Onboarding & Events​

  • Get Started - App introduction and welcome screen
  • Onboarding - Multi-step user onboarding process
  • Upcoming Events - Event calendar and scheduling interface

Blank Options​

  • Blank Screen - Start with a completely empty canvas for custom designs

Styles on Desktop

How to Use Templates​

Adding a Template​

  1. Browse Available Templates: Scroll through the template collection or use search
  2. Preview Template: Each template shows a preview image of the final design
  3. Click to Add: Simply click on any template to add it to your project
  4. Instant Integration: The template is immediately added as a new screen in your app

Template Features​

  • Pre-built Components: All templates include functional UI components
  • Professional Design: Modern, mobile-first responsive layouts
  • Interactive Elements: Buttons, forms, and navigation already configured
  • Customizable Content: All text, images, and styling can be modified
  • Design System: All templates already includes global styles and support light/dark theme

Search and Filter​

  • Quick Search: Type keywords to instantly filter templates
  • Name-based Search: Search by template name (e.g., "login", "dashboard", "cart")
  • Real-time Results: Search results update as you type
  • Clear Filters: Clear search to see all available templates
Loading video...

Customization After Adding Templates​

Once you've added a template to your project, you can fully customize it:

Visual Customization​

  • Edit Text Content: Click on any text element to modify the content
  • Change Images: Replace placeholder images with your own
  • Adjust Colors: Apply your brand colors and design system
  • Modify Layout: Resize, reposition, or remove components as needed

Functional Customization​

  • Configure Actions: Set up button clicks, form submissions, and navigation
  • Add Components: Enhance templates with additional components from the library
  • Connect Data: Link forms and displays to your database or external APIs
  • Set Up Workflows: Create custom logic and automation

Design System Integration​

  • Apply Brand Colors: Use your design system colors throughout the template
  • Update Typography: Apply consistent fonts and text styling
  • Maintain Consistency: Ensure template matches your app's overall design

Best Practices​

Template Selection​

  • Choose Appropriate Templates: Select templates that match your app's purpose and user needs
  • Consider User Flow: Pick templates that work well together for seamless navigation
  • Start with Core Screens: Begin with essential templates like login, dashboard, or main content areas

Customization Strategy​

  • Brand Consistency: Apply your brand colors, fonts, and styling across all templates
  • Content Planning: Prepare your content (text, images, data) before customization
  • User Experience: Ensure templates flow logically and provide good user experience
  • Mobile Optimization: Test templates on different screen sizes for responsive design

Development Workflow​

  • Template First: Start with the closest template rather than building from scratch
  • Iterative Refinement: Gradually customize and refine the template to match your vision
  • Component Reuse: Use template components as building blocks for other screens
  • Testing: Test all template functionality in "Preview mode" before publishing

Need Assistance?​

If you encounter any challenges or require further guidance while using templates, please refer to the Documentation or contact our support team at [email protected].